<div class="input-group Form-mixedInputGroup">
    <span class="input-group-btn Form-variableHeightButtonGroup input-group-prepend">
        <button type="button"
            aria-label="{{'Open credential lookup'|translate}}"
            class="Form-lookupButton
                Form-lookupButton--variableHeight btn btn-default"
                ng-click="openModal()"
                ng-disabled="fieldIsDisabled">
            <i class="fa fa-search"></i>
        </button>
    </span>
    <span class="form-control Form-textInput Form-textInput--variableHeight input-medium lookup"
          ng-class="{'ng-dirty': fieldDirty}"
          ng-disabled="fieldIsDisabled"
          style="padding: 4px 6px;">
        <div class="MultiCredential-tags">
            <div class="MultiCredential-tagSection">
                <div class="MultiCredential-flexContainer">
                    <div class="MultiCredential-tagContainer ng-scope"
                        ng-class="{'MultiCredential-tagContainer--disabled': tag.readOnly}"
                        ng-repeat="tag in tags track by $index">
                        <div class="MultiCredential-iconContainer--disabled" ng-switch="tag.kind" ng-if="fieldIsDisabled">
                            <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
                            <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
                            <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
                            <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
                            <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
                            <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
                        </div>
                        <div class="MultiCredential-iconContainer" ng-switch="tag.kind" ng-if="!fieldIsDisabled">
                            <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
                            <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
                            <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
                            <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
                            <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
                            <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
                        </div>
                        <div class="MultiCredential-tag"
                            ng-class="{'MultiCredential-tag--deletable': !fieldIsDisabled, 'MultiCredential-tag--disabled': fieldIsDisabled}">
                            <span ng-if="!tag.info" class="MultiCredential-name--label ng-binding">
                                {{ tag.name }}
                            </span>
                            <span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
                                {{ tag.name }} | {{ tag.info }}
                            </span>
                        </div>
                        <div class="MultiCredential-deleteContainer"
                            ng-click="vm.deselectCredential(tag)"
                            ng-hide="fieldIsDisabled">
                            <i class="fa fa-times MultiCredential-tagDelete"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </span>
</div>
